﻿<style>
    .popover-content {
        font-size: 14px;
        color: black;
        font-weight: normal;
        width: 200px;
    }
</style>

<table class="table">
    <thead>
        <tr>
            <th class="table-head" style="border-top: none; width: 165px;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Theme</th>
            <th class="table-head" style="border-top: none; width: 405px;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Indicator Name</th>
            <th class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Company Score<br /> (out of 100)</th>
            <th class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Peer Group<br /> Average</th>
            <th class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">
                Leading<br />Practice Average
                <!--<a ng-click="showPracticeAverage = !showPracticeAverage" href="" class="ng-class:showPracticeAverage ? 'info-link active' : 'info-link'" ng-blur="showPracticeAverage = false">
            &nbsp;
        </a>
        <div ng-show="showPracticeAverage || mouseover" class="infobox" ng-mouseover="mouseover=true" ng-mouseleave="mouseover=false">
            The Leading Practice Average is the top quartile mean score among industry peers
        </div>-->
                <a class="info-link" popover-placement="bottom" popover="The Leading Practice Average is the top quartile mean score among industry peers" popover-trigger="mouseenter">
                    &nbsp;
                </a>
            </th>
            <th class="table-head" style="border-top: none; border-right: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">
                Leading<br />Practice Gap
                <!--<a ng-click="showPracticeGap = !showPracticeGap" href="" class="ng-class:showPracticeGap ? 'info-link active' : 'info-link'" ng-blur="showPracticeGap = false">
            &nbsp;
        </a>
        <div ng-show="showPracticeGap || mouseover" class="infobox" ng-mouseover="mouseover=true" ng-mouseleave="mouseover=false">
            The Leading Practice Gap is the difference between the Leading Practice Average and the company’s score for that particular indicator. The size of the gap is indicated by the colored dot.
        </div>-->
                <a class="info-link" popover-placement="bottom" popover="The Leading Practice Gap is the difference between the Leading Practice Average and the company’s score for that particular indicator. The size of the gap is indicated by the colored dot." popover-trigger="mouseenter">
                    &nbsp;
                </a>
            </th>
        </tr>
    </thead>


    <tbody ng-repeat="keyEsgIssueInfo in analystView.keyEsgIssueInfoDic.getValues()" style="border-top: 1px solid #cccccc;">
        <tr class="{{$index % 2==1 ? 'table-row odd': 'table-row'}}" ng-repeat="indicator in keyEsgIssueInfo.getIndicators()">
            <td class="table-cell table-cell-block" style="width: 165px; background-color: transparent;" ng-if="$index == 0 || ($index > 0 && keyEsgIssueInfo.getIndicators()[$index-1].indicatorTheme != indicator.indicatorTheme)"><b ng-bind="indicator.indicatorTheme"></b></td>
            <td class="table-cell table-cell-block" style="border-top: none; width: 165px; background-color: transparent;" ng-if="$index > 0 && keyEsgIssueInfo.getIndicators()[$index-1].indicatorTheme == indicator.indicatorTheme">&nbsp;</td>
            <td class="table-cell table-cell-block" style="width: 405px;">
                <a href="" ng-click="analystView.navigateTo(indicator)"><span style="font-weight: bold;">{{ indicator.name }}</span></a>
            </td>
            <td class="table-cell table-cell-block" style="width: 155px; text-align: center;">{{ indicator.companyScoreName }}&nbsp;</td>
            <td class="table-cell table-cell-block" style="width: 155px; text-align:center;">{{ indicator.peerGroupAvgName }}&nbsp;</td>
            <td class="table-cell table-cell-block" style="width: 155px; text-align:center;">{{ indicator.bestPracticeName }}&nbsp;</td>
            <td class="table-cell table-cell-block" style="width: 155px; text-align:center; border-right: none;">
                <div ng-style="{ 'background-color': indicator.materialBestPracticeGapColor }" ng-show="indicator.materialBestPracticeGap != -1" style="width:13px; height: 13px; border-radius: 10px; display: inline-block;"></div>
                <div style="width:13px; height: 13px; border-radius: 10px; display: inline-block; background-color: #acb0b2;" ng-show="indicator.materialBestPracticeGap == -1"></div>
                &nbsp;
            </td>
            <!--<div class="clearfix"></div>-->
        </tr>
    </tbody>
</table>










<!--<div class="table">
    <div class="">
        <div class="table-head" style="border-top: none; width: 165px;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Theme</div>
        <div class="table-head" style="border-top: none; width: 405px;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Indicator Name</div>
        <div class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Company Score<br/> (out of 100)</div>
        <div class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">Peer Group<br /> Average</div>
        <div class="table-head" style="border-top: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">
            Leading<br />Practice Average            
            <a class="info-link" popover-placement="bottom" popover="The Leading Practice Average is the top quartile mean score among industry peers" popover-trigger="mouseenter">
                &nbsp;
            </a>
        </div>
        <div class="table-head" style="border-top: none; border-right: none; width: 155px; text-align:center;" ng-show="analystView.keyEsgIssueInfoDic.getValues().length > 0">
            Leading<br />Practice Gap            
            <a class="info-link" popover-placement="bottom" popover="The Leading Practice Gap is the difference between the Leading Practice Average and the company’s score for that particular indicator. The size of the gap is indicated by the colored dot." popover-trigger="mouseenter">
                &nbsp;
            </a>
        </div>
    </div>


    <div ng-repeat="keyEsgIssueInfo in analystView.keyEsgIssueInfoDic.getValues()" style="border-top: 1px solid #cccccc;">
        <div class="{{$index % 2==1 ? 'table-row odd': 'table-row'}}" ng-repeat="indicator in keyEsgIssueInfo.getIndicators()">
            <div class="table-cell table-cell-block" style="width: 165px; background-color: transparent;" ng-if="$index == 0 || ($index > 0 && keyEsgIssueInfo.getIndicators()[$index-1].indicatorTheme != indicator.indicatorTheme)"><b ng-bind="indicator.indicatorTheme"></b></div>
            <div class="table-cell table-cell-block" style="border-top: none; width: 165px; background-color: transparent;" ng-if="$index > 0 && keyEsgIssueInfo.getIndicators()[$index-1].indicatorTheme == indicator.indicatorTheme">&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 405px;">
                <a href="" ng-click="analystView.navigateTo(indicator)"><span style="font-weight: bold;">{{ indicator.name }}</span></a>
            </div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align: center;">{{ indicator.companyScoreName }}&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align:center;">{{ indicator.peerGroupAvgName }}&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align:center;">{{ indicator.bestPracticeName }}&nbsp;</div>
            <div class="table-cell table-cell-block" style="width: 155px; text-align:center; border-right: none;">
                <div ng-style="{ 'background-color': indicator.materialBestPracticeGapColor }" ng-show="indicator.materialBestPracticeGap != -1" style="width:13px; height: 13px; border-radius: 10px; display: inline-block;"></div>
                <div style="width:13px; height: 13px; border-radius: 10px; display: inline-block; background-color: #acb0b2;" ng-show="indicator.materialBestPracticeGap == -1"></div>
                &nbsp;
            </div>
            <div class="clearfix"></div>
        </div>        
    </div>
</div>-->
<div class="key-esg-legend">
    <div style="float: left; width: 33%;">
        <div class="key-esg-legend-left">
            <div style="width: 13px; height: 13px; border-radius: 10px; display: inline-block; background-color: rgb(64, 174, 73);"></div>
        </div>
        <div class="key-esg-legend-right">
            A negative to +25 point gap
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div style="float: left; width: 33%;">
        <div class="key-esg-legend-left">
            <div style="width: 13px; height: 13px; border-radius: 10px; display: inline-block; background-color: rgb(231, 214, 0);"></div>
        </div>
        <div class="key-esg-legend-right">
            A 26-74 point gap
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div style="float: left; width: 33%;">
        <div class="key-esg-legend-left">
            <div style="width: 13px; height: 13px; border-radius: 10px; display: inline-block; background-color: rgb(170, 43, 49);"></div>
        </div>
        <div class="key-esg-legend-right">
            A 75+ point gap
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    
</div>
